<!DOCTYPE html>
<head>
    <title>anan</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <link rel="stylesheet" href="anan.css" type="text/css">
    <script src="js/Sakura.js" defer></script>
</head>
<body>
    <div class="buttons">
        <button onclick="changeSakura();">
            <svg t="1695627891305" class="icon" viewBox="0 0 1024 1024" version="1.1" 
                xmlns="http://www.w3.org/2000/svg" p-id="1588" width="200" height="200" style="fill: #FFC0CB">
                <path d="M932.9 407.3c-5.8-8.3-17.3-18.3-38.9-18.8-5.7-0.1-11.4 0.4-17.1 1.1 8.9-17.3 17.6-40.3 4.9-62.9-12-21.3-37.1-31.1-74.8-29.1-20.2 1.1-39.2 5.1-46.4 6.8-79.9 18.7-127.1 74.6-142.6 93-7.1 8.4-14 16.6-20.4 24.6 30.7-46.6 53.9-121.2 39.3-193.2-10.6-52.3-43.7-106.7-76.8-126.4-17.2-10.3-31.4-9.2-40.2-6.5-9.7 3-22.8 10.8-29.9 31.2-1.9 5.4-3.2 11-4.2 16.6-13.8-13.8-32.9-29.2-58.3-24.1-24 4.8-41.1 25.7-50.8 62.1-5.2 19.6-7.2 38.9-7.8 46.2-6.9 81.8 31.7 143.9 44.4 164.3 5.8 9.3 11.5 18.4 17.1 27-34.8-43.6-98.6-88.7-171.6-97-53.1-6-115 8.6-144 34-15.1 13.2-18.4 27-18.6 36.2-0.2 10.2 3.2 25 20.4 38.1 4.6 3.5 9.5 6.4 14.5 9.1-17.4 8.8-37.9 22.3-40.9 48-2.8 24.3 11.8 47 43.4 67.5 17 11 34.7 18.9 41.6 21.7 33.7 14.2 66.5 18.6 94.5 18.6 34.9 0 62.5-6.8 75.5-10 10.7-2.6 21.1-5.2 31-7.9-52.2 19.7-114.9 66.4-145.3 133.2-22.1 48.6-27.4 112-12.2 147.5 7.9 18.4 20 25.9 28.7 28.9 9.6 3.3 24.8 4.7 42.5-7.7 4.7-3.3 9-7 13.2-10.9 3 19.2 9.4 42.9 33 53.8 6.7 3.1 13.7 4.6 21 4.6 17.2 0 36.1-8.4 56.6-25 15.7-12.8 28.7-27.2 33.5-32.8 53.7-62.1 58.9-135.1 60.7-159 0.8-11 1.6-21.8 2-32.1 2.5 55.8 27.5 129.9 81.8 179.6 36.9 33.8 90.6 57.5 128.9 57.5 2.6 0 5.1-0.1 7.6-0.3 20-1.8 30.8-11 36.4-18.4 6.1-8.1 12.1-22.1 5.9-42.8-1.7-5.5-3.9-10.8-6.3-15.9 19.2 3.1 43.8 4.3 61.3-14.8 16.6-18 18.1-44.9 4.6-80.1-7.3-18.9-17-35.7-20.8-42-42.5-70.2-110.2-97.8-132.5-106.9-10.2-4.1-20.1-8.2-29.7-11.8 20.5 5.6 44.4 9 69.8 9 41.4 0 86.4-8.9 126.1-31.3 46.5-26.3 88-74.5 96.5-112.1 4.1-19.7-1.3-32.9-6.6-40.4zM433.7 233.4c1.4-16.5 4.6-31.8 7.9-42 1.4 1.4 2.7 2.8 3.8 3.9 6.3 6.6 12.8 13.4 20.4 19 17.9 12.9 33.6 12 43.7 9.1 10.4-3.1 24.4-11.2 32.3-32.7 1.5-4.1 2.7-8.4 3.7-12.6 1.4 1.9 2.8 4 4.2 6.2 11.2 17.6 19.6 38 23.6 57.5 11.6 56.8-10.7 122.3-37.6 155-12 14.7-20.9 18-23 18 0 0-3.8-0.4-12.3-10.1-9.7-11-20.5-28.4-31.9-46.7-10.9-17.6-39.9-64.2-34.8-124.6z m-104.1 289c-11.3 2.8-33.1 8.2-59.9 8.2-20.9 0-44.9-3.3-69.3-13.5-15.3-6.4-28.9-14.2-37.5-20.5 1.8-0.9 3.5-1.7 4.9-2.4 8.2-3.9 16.7-8 24.3-13.6 17.8-13 21.9-28.3 22.1-38.8 0.3-10.8-3.2-26.6-21.1-40.8-3.4-2.7-7.1-5.2-10.8-7.4 2.3-0.7 4.7-1.4 7.2-2.1 20.2-5.3 42.2-6.9 61.9-4.7 57.6 6.6 113 48 135.8 83.7 10.3 16 10.7 25.4 10 27.5 0 0-1.6 3.5-13.4 8.6-13.4 5.7-33.2 10.6-54.2 15.8zM443 705.3c-1.5 20.6-5.5 75.4-45 121.2-10.8 12.5-22.4 23.1-31.1 29.3-0.3-2-0.5-3.8-0.7-5.4-1.2-9-2.4-18.4-5.4-27.3-6.9-20.9-20.1-29.5-30.1-33-4.1-1.5-9.2-2.6-15-2.6-8.6 0-19 2.5-30.3 10-3.6 2.4-7.1 5.2-10.4 8 0-2.4 0.1-4.9 0.3-7.5 1.2-20.8 6.4-42.2 14.7-60.3 24.1-52.8 80.6-92.6 121.6-103.3 18.4-4.8 27.5-2.3 29.2-1 0 0 2.8 2.6 4 15.4 1.3 14.6-0.2 35-1.8 56.5z m310.4 29c8.6 14.2 15 28.4 18.3 38.6-1.9-0.3-3.8-0.7-5.4-1-8.9-1.6-18.1-3.3-27.5-3.3h-0.2c-22 0.1-34.3 10-40.7 18.4-6.6 8.6-13.1 23.4-6.9 45.4 1.2 4.2 2.7 8.4 4.4 12.3-2.2-0.8-4.6-1.6-7.1-2.6-19.4-7.6-38.2-19.2-52.9-32.6-42.8-39.2-63.2-105.3-60.7-147.5 1.1-19 6.3-26.8 8.1-28.1 0 0 1.1-0.6 4.3-0.6 2.5 0 6.2 0.4 11.6 1.6 14.3 3.2 33.2 10.9 53.3 19.1 19.2 7.8 70.1 28.5 101.4 80.3zM613.1 571.5c-10.3-2.3-41.7-9.4-68.2 9.7-20.2 14.6-32.2 40.1-34.8 74.1-0.1-4.3-0.3-8.4-0.7-12.5-1-10.5-3.9-42.6-30.3-61.9-20.1-14.7-48.1-18.2-81.2-10.2 4-1.4 7.9-2.9 11.6-4.5 9.7-4.2 39.3-16.9 49.5-47.9 7.8-23.7 2.5-51.4-15.4-80.3 2.6 3.4 5.2 6.6 7.9 9.7 7 7.9 28.2 32.1 60.9 32.3h0.3c24.8 0 49.4-13.6 71.4-39.5-2.4 3.5-4.7 7-6.7 10.5-5.4 9.1-21.8 36.7-11.9 67.9 7.6 23.7 28.2 43 59.7 55.9-4.1-1.3-8.1-2.4-12.1-3.3zM858 462.9c-13.2 16.1-30 30.4-47.4 40.2-50.5 28.6-119.6 27.6-159.1 12.1-17.7-6.9-23.6-14.3-24.2-16.3 0 0-0.7-3.7 5.8-14.8 7.5-12.6 20.7-28.2 34.6-44.8 13.3-15.8 48.7-57.8 107.7-71.6 15.9-3.7 31.3-5.4 42-5.4h0.4c-0.9 1.7-1.8 3.4-2.6 4.8-4.3 8-8.8 16.3-11.7 25.3-6.8 21-1.1 35.7 4.9 44.4 6.1 8.9 18.2 19.7 41.1 20.6 4.4 0.2 8.8 0 13.1-0.4-1.4 1.9-2.9 3.9-4.6 5.9z"  p-id="1589">
                </path>
            </svg>
        </button>
        <!-- <button id="more" onclick="window.location.href='https://www.baidu.com/'">More</button> -->
        <button id="more" onclick="window.location.href='time.html'">More</button>
    </div>
    <div id="mouseWheel" class="layout">
        <div class="onePage">
            <div id="intro" pageVar="3" draggable="true">
                <header>
                    <h1 id="heading">啊楠，<br>&nbsp;&nbsp;&nbsp;冲鸭！</h1>
                    <h2 id="subheading">这里是独属于啊楠的地方</h2>
                    <div id="slice-left" class="slice left"></div>
                    <div id="slice-right" class="slice right"></div>
                </header>
            </div>
            <div class="rightPage" pageVar="2" draggable="true">
                <div class="bg"></div>
                <div class="img1"></div>
                <div class="stripe" id="stripe"></div>
            </div>
        </div>
    </div>
    <div class="pageControl">
        <span id="btn1" class="pageControl_btn selected" onclick="mousePage(1);"></span>
        <span id="btn2" class="pageControl_btn" onclick="mousePage(2);"></span>
    </div>
    <div class="footer">
        <a href="https://beian.miit.gov.cn" target="_blank" rel="external nofollow">晋ICP备2023021717号-1</a>
    </div>
</body>

<script type="text/javascript">

    fetch('https://api.ipify.org/')
    .then((r) => {
            r.text().then((t) =>{
                let ip = t;
                // let add_str = 'https://whois.pconline.com.cn/ip.jsp/?ip=' + ip
                let add_str = 'http://ip-api.com/json/' + ip + '?lang=zh-CN';
                window.sessionStorage.setItem('repeat',ip);
                addElement(add_str,ip)
            })
        }
    )

    function addElement(add_str,ip) {
        let id = Date.parse(new Date());
        let db_ip = ip;
        let time = getNowTime(); 
        let db_city = add_str;
        let params  = {
                _id: id,
                ip: db_ip,
                city: db_city,
                time: time,
            };
        str_params = JSON.stringify(params);
        let load = window.performance.navigation.type;//0网址1刷新2后退255其它
        // console.log(load);
        if(sessionStorage.getItem('repeat') && load == 0) {
            back(str_params);
        }
    }

    function back(params) {
        fetch("http://5581ef2b.r3.cpolar.cn/info", 
        {   
            method: "POST",
            body: params,
			mode: 'cors',
			headers: {
			    'Access-Control-Allow-Origin': '*',
			  }
        })
        .then((response) => {
            if (response.ok) {
                // console.log('res', response)
                response.json().then((res) => {
                    // console.log('res', res)
                })
            }
        })
    };

    function getNowTime() {
        var date = new Date();
        this.year = date.getFullYear();
        this.month = date.getMonth() + 1;
        this.date = date.getDate();
        this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // this.milliSeconds = date.getMilliseconds();
        var currentTime = this.year+'-'+this.month + '-' + this.date + ' ' + this.hour + ':' + this.minute 
            + ':' + this.second 
            // + '.' + this.milliSeconds;
        return currentTime;
    }

    class PageEvent {
        constructor() {
            this.mouseWheeldiv = document.getElementById("mouseWheel");
            this.windowWidth = document.documentElement.clientWidth;
            this.stripe = document.getElementById('stripe');
            this.pageId = 1;
        };
        nodeLight() {
            let btn;
            if(this.pageId === 1) {
                btn = "btn1";
            }else if(this.pageId === 2) {
                btn = "btn2";
            };
            let btn_else = (btn==="btn1") ? "btn2" : "btn1";
            document.getElementById(btn).setAttribute("class", "pageControl_btn selected");
            document.getElementById(btn_else).setAttribute("class", "pageControl_btn");
        };
        mouseWheelf() {
            let that = this;
            that.mouseWheeldiv.addEventListener("wheel", function (e) {
                e.preventDefault(); 
                let step = e.deltaY;
                mouseWheel.scrollLeft = mouseWheel.scrollLeft + step;
                if (mouseWheel.scrollLeft > that.windowWidth/1.75) {
                    that.pageId = 2;
                }else {
                    that.pageId = 1;
                }
                that.nodeLight();
                document.getElementById("more").style.color = (mouseWheel.scrollLeft > 0) ? "white" : "black";
            });
        };
        onclick() {
            this.stripe.onclick = function (e) {
                let target =e.target;
                let rect = target.getBoundingClientRect();
                let ripple = target.querySelector('.ripple');
                if (!ripple) {
                    ripple = document.createElement('span');
                    ripple.className = 'ripple'
                    ripple.style.height = ripple.style.width = Math.max(rect.width,rect.height) + 'px';
                    target.appendChild(ripple);
                }
                ripple.classList.remove('show');
                let top = e.pageY - ripple.offsetHeight / 2;
                let left = e.pageX - ripple.offsetWidth / 2;
                ripple.style.top = top + 'px'
                ripple.style.left = left + 'px'
                ripple.classList.add('show');
                setInterval(switchIndex,750);
            };
        };
    }

    let pageevent = new PageEvent();
    window.onload = function () {
        pageevent.mouseWheelf();
        pageevent.onclick();
    };

    function switchIndex() {
        window.location.href = "stories.html";
    };

    function changeSakura() {
        stopp();
        if(document.getElementsByTagName("svg")[0].style.fill == 'rgb(255, 192, 203)') {
            document.getElementsByTagName("svg")[0].style.fill = '#65bc6a';
        }else {
            document.getElementsByTagName("svg")[0].style.fill = '#FFC0CB';
        }
    };
    
    function mousePage(pageId) {
        if(pageId == 1) {
            pageevent.mouseWheeldiv.scrollTo({
                left: pageevent.mouseWheeldiv.scrollLeft - pageevent.windowWidth,
                behavior: "smooth",
            });
        }else if(pageId == 2) {
            pageevent.mouseWheeldiv.scrollTo({
                left: pageevent.mouseWheeldiv.scrollLeft + pageevent.windowWidth,
                behavior: "smooth",
            });
        };
        pageevent.pageId = pageId;
        pageevent.nodeLight();
        document.getElementById("more").style.color = (pageId == 2) ? "white" : "black";
    };
</script>
</html>